import React, {useEffect, useState} from 'react'
import { PageHeader, Descriptions, Card } from 'antd';
import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons'
import axios from 'axios';

export default function Preview(props) {
  const [newsInfo, setnewsInfo] = useState(null)
  useEffect(() => {
    console.log(props.match.params.id)
    axios.get('https://mock.mengxuegu.com/mock/6190fd8cf126df7bfd5b75e8/userList/queryNewsDetail').then(res => {
      const {data: {data}} = res
      setnewsInfo(data)
    })
  }, [props.match.params.id])
  return (
    <div>
      {
        newsInfo && <div>
          <PageHeader
            ghost={false}
            onBack={() => window.history.back()}
            title={newsInfo?.note}
            subTitle={newsInfo?.gender}
          >
            <Descriptions size="small" column={3}>
              <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
              <Descriptions.Item label="创建时间">
                <a>{newsInfo.createTime}</a>
              </Descriptions.Item>
              <Descriptions.Item label="发布时间">2017-01-10</Descriptions.Item>
              <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
              <Descriptions.Item label="审核状态">
                Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
              </Descriptions.Item>
              <Descriptions.Item label="发布状态">
                Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
              </Descriptions.Item>
              <Descriptions.Item label="访问数量">
                Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
              </Descriptions.Item>
              <Descriptions.Item label="点赞数量">
                {newsInfo.start}
              </Descriptions.Item>
              <Descriptions.Item label="评论数量">
                Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
              </Descriptions.Item>
            </Descriptions>
          </PageHeader>
          <Card title="内容" extra={<HeartTwoTone twoToneColor="#eb2f96" />}>
            <div dangerouslySetInnerHTML={{
              __html: newsInfo.content
            }}>
            </div>
          </Card>
        </div>
      }
    </div>
  )
}
